﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductDetails.aspx.cs"
    Inherits="ShowroomMobile.ProductDetails" MasterPageFile="~/Product.Master" Theme="tbmobile" %>

<%@ Register Src="~/Controls/NextPrev.ascx" TagName="NextPrev" TagPrefix="uc" %>
<%@ Register Src="~/Controls/FacebookButton.ascx" TagName="FacebookButton" TagPrefix="uc" %>
<%@ Register Src="~/Controls/GoogleButton.ascx" TagName="GoogleButton" TagPrefix="uc" %>
<asp:Content runat="server" ID="cProductDetails" ContentPlaceHolderID="body">
    <script type="text/javascript">
        $(document).ready(function () {
            var arrPictureProductLoaded = Array();
            arrPictureProductLoaded[0] = 1; function changePictureProduct(ob) {

                if (arrPictureProductLoaded[ob.index()] != 1) {
                    $(".blockProDetail .blockProImages .blockImages .loading").removeClass("hidden");
                }

                $(".blockProDetail .blockProImages ul.blockThumbs li").removeClass("current");
                ob.addClass("current");

                fullpath = ob.find("a").attr("href");
                mainpath = ob.find("a").attr("mainPicture");

                html = '<span></span><img src="' + mainpath + '" onClick="productPictureColorbox(' + ob.index() + ')" />';

                obImg = $(html);
                if (arrPictureProductLoaded[ob.index()] != 1) {
                    obImg.load(function () {
                        arrPictureProductLoaded[ob.index()] = 1;
                        $(".blockProDetail .blockProImages .blockImages .loading").addClass("hidden");
                    });
                }

                $(".blockProDetail .blockProImages .blockImages .picture_large").html(obImg);
            }

            $(".blockProDetail .blockProImages ul.blockThumbs li").mouseenter(function () {
                if ($(this).is(".current")) return;
                changePictureProduct($(this));
            });

            var totalProductPicture = <%= TotalPicture %>;
            var curProductPicturePage = 1;
            var maxProductPicturePage = 1;
            if (curProductPicturePage < maxProductPicturePage) {
                $(".blockProDetail .blockProImages .blockImages .next").click(function () {
                    if (curProductPicturePage == 1) return;
                    curProductPicturePage--;
                    $(".blockProDetail .blockProImages ul.blockThumbs").animate({ marginLeft: "+=329" }, 1000, "easeInOutBack");
                    $(this).blur();
                });
                $(".blockProDetail .blockProImages .blockImages .previous").click(function () {
                    if (curProductPicturePage == maxProductPicturePage) return;
                    curProductPicturePage++;
                    $(".blockProDetail .blockProImages ul.blockThumbs").animate({ marginLeft: "-=329" }, 1000, "easeInOutBack");
                    $(this).blur();
                });
            }

            $(".blockProDetail .blockProImages .blockImages").prepend('<a class="previous" href="javascript:;" style="display:none"></a><a class="next" href="javascript:;" style="display:none"></a>')
.hover(
function () { $(this).find(".previous, .next").show(); },
function () { $(this).find(".previous, .next").hide(); }
);

            var curProductPicture = 1;
            $(".blockProDetail .blockProImages .blockImages .previous, .blockProDetail .blockProImages .blockImages .next").click(function () {
                $(this).blur();
                if ($(this).is(".previous")) {
                    curProductPicture--;
                    if (curProductPicture < 1) curProductPicture = totalProductPicture;
                }
                else {
                    curProductPicture++;
                    if (curProductPicture > totalProductPicture) curProductPicture = 1;
                }
                ob = $(".blockProDetail .blockProImages ul.blockThumbs li:eq(" + (curProductPicture - 1) + ")");
                changePictureProduct(ob);
            });

            function productPictureColorbox(id) {
                $(".blockProDetail .blockProImages ul.blockThumbs a[rel='product_picture']:eq(" + id + ")").click();
            }
        });
    </script>
    <div class="product_details bg_tran">
        <div class="blockProDetail">
            <div class="blockProImages">
                <div class="blockImages">
                    <h1 class="picture_large" id="pictureLarge" runat="server">
                        <span></span>
                        <img src="images/1-home.jpg" alt="Images product" /></h1>
                    <div class="loading hidden" style="left: auto;">
                    </div>
                </div>
                <ul class="blockThumbs" runat="server" id="blockThumbs">
                    <li class="current"><a href="#" title="Product 01" mainpicture="images/1-home.jpg"
                        rel="product_picture"><span></span>
                        <img src="images/1-home.jpg" alt="Product 01" /></a></li>
                    <li><a href="#" title="Product 02" mainpicture="images/10-home.jpg" rel="product_picture">
                        <span></span>
                        <img src="images/10-home.jpg" alt="Product 02" /></a></li>
                    <li><a href="#" title="Product 01" mainpicture="images/100-home.jpg" rel="product_picture">
                        <span></span>
                        <img src="images/100-home.jpg" alt="Product 01" /></a></li>
                    <li><a href="#" title="Product 02" mainpicture="images/118-home.jpg" rel="product_picture">
                        <span></span>
                        <img src="images/118-home.jpg" alt="Product 02" /></a></li>
                </ul>
            </div>
            <div class="blockDetail">
                <h4>
                    <asp:Label runat="server" ID="lblProductName" /><uc:NextPrev runat="server" ID="ucNextPrevHead" /></h4>
                <hr />
                <p>
                    <span class="price" style="font-size:16px"><asp:Label runat="server" ID="lblPrice" /></span>
                </p>
                <p>
                    <asp:Label runat="server" ID="lblProductDetail" /></p>
                <div class="blockFooter">
                    <uc:FacebookButton runat="server" ID="ucFacebookButton" />
                    <uc:GoogleButton runat="server" ID="ucGoogleButton" />
                    <%--<div id="fb-root">
                    </div>
                    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
                    <fb:comments href="<%= FacebookCommentLink %>" num_posts="2" width="660"></fb:comments>--%>
                </div>
            </div>
        </div>
    </div>
</asp:Content>
